<template>
  <div class="app-container">
    <el-form :model="queryParams"
             ref="queryForm"
             size="small"
             :inline="true"
             v-show="showSearch"
             label-width="68px">
      <el-form-item label="机构名称"
                    prop="name">
        <el-input v-model="queryParams.name"
                  placeholder="请输入机构名称"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="机构代码"
                    prop="code">
        <el-input v-model="queryParams.code"
                  placeholder="请输入机构代码"
                  clearable
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="机构等级"
                    prop="level">
        <el-select v-model="queryParams.level"
                   placeholder="机构等级"
                   clearable
                   style="width: 200px">
          <el-option v-for="dict in dict.type.institution_level"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="机构类别"
                    prop="category">
        <el-select v-model="queryParams.category"
                   placeholder="机构类别"
                   clearable
                   style="width: 200px">
          <el-option v-for="dict in dict.type.institution_category"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="机构状态"
                    prop="status">
        <el-select v-model="queryParams.status"
                   placeholder="机构状态"
                   clearable
                   style="width: 200px">
          <el-option v-for="dict in dict.type.sys_normal_disable"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10"
            class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:institution:add']"
        >新增</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['system:institution:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['system:institution:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning"
                   plain
                   icon="el-icon-download"
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['system:institution:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="institutionList"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"
                       align="center" />
      <el-table-column label="机构编号"
                       align="center"
                       prop="id" />
      <el-table-column label="所属部门"
                       align="center"
                       prop="deptName" />
      <el-table-column label="机构名称"
                       align="center"
                       prop="name" />
      <el-table-column label="用户名称"
                       align="center"
                       prop="contacts" />
      <el-table-column label="手机号码"
                       align="center"
                       prop="mobile"
                       width="120" />
      <el-table-column label="机构代码"
                       align="center"
                       prop="code" />
      <el-table-column label="机构等级"
                       align="center"
                       prop="level" />
      <el-table-column label="机构类别"
                       align="center"
                       prop="category" />
      <el-table-column label="设备总数(台)"
                       align="center"
                       prop="equipmentCount" />
      <el-table-column label="总处理量(T)"
                       align="center"
                       prop="totalHandle" />
      <el-table-column label="日处理量(T)"
                       align="center"
                       prop="dayHandle" />
      <el-table-column label="创建时间"
                       align="center"
                       prop="createTime" />
      <el-table-column label="状态"
                       align="center"
                       prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable"
                    :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:institution:edit']">修改</el-button>

          <el-button size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="handleView(scope.row)"
                     v-hasPermi="['system:institution:query']">详情</el-button>

          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['system:institution:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改【医疗机构】对话框 -->
    <el-dialog :title="title"
               :visible.sync="open"
               width="600px"
               append-to-body>
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="100px">
        <el-form-item label="机构名称"
                      prop="name">
          <el-input v-model="form.name"
                    placeholder="请输入机构名称" />
        </el-form-item>
        <el-form-item label="机构代码"
                      prop="code">
          <el-input v-model="form.code"
                    placeholder="请输入机构代码" />
        </el-form-item>
        <el-form-item label="联系人"
                      prop="contacts">
          <el-input v-model="form.contacts"
                    placeholder="请输入机构联系人" />
        </el-form-item>
        <el-form-item label="机构电话"
                      prop="mobile">
          <el-input v-model="form.mobile"
                    placeholder="请输入机构电话" />
        </el-form-item>
        <el-form-item label="归属部门"
                      prop="deptId">
          <treeselect v-model="form.deptId"
                      :options="deptOptions"
                      :show-count="true"
                      placeholder="请选择归属部门" />
        </el-form-item>
        <el-form-item label="机构等级"
                      prop="level">
          <el-select v-model="form.level"
                     placeholder="请选择机构等级">
            <el-option v-for="dict in dict.type.institution_level"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构类别"
                      prop="category">
          <el-select v-model="form.category"
                     placeholder="请选择机构类别">
            <el-option v-for="dict in dict.type.institution_category"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构状态"
                      prop="category">
          <el-select v-model="form.status"
                     placeholder="请选择机构状态">
            <el-option v-for="dict in dict.type.sys_normal_disable"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址"
                      prop="address">
          <el-input v-model="form.address"
                    placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="门头照片"
                      prop="address">
          <el-upload ref="upload"
                     :limit="1"
                     drag
                     class="avatar-uploader uploadMt"
                     :show-file-list="false"
                     action="#"
                     :multiple="false"
                     :http-request="updateUserImg">
            <img v-if="mtImg"
                 :src="mtImg"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="许可证照片"
                      prop="address">
          <el-upload ref="upload"
                     :limit="1"
                     drag
                     class="avatar-uploader uploadMt"
                     :show-file-list="false"
                     action="#"
                     :multiple="false"
                     :http-request="updateUserImg1">
            <img v-if="xkImg"
                 :src="xkImg"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog :title="title"
               :visible.sync="viewOpen"
               width="90%"
               append-to-body>
      <!--      <el-form ref="form" :model="form" label-width="100px" size="mini">-->
      <!--        <el-row>-->
      <!--          <el-col :span="12">-->
      <!--            <el-form-item label="机构名称：">{{form.name}}</el-form-item>-->
      <!--            <el-form-item label="机构代码：">{{form.code}}</el-form-item>-->
      <!--            <el-form-item label="归属部门：">{{form.deptName}}</el-form-item>-->
      <!--            <el-form-item label="机构等级：">{{form.level}}</el-form-item>-->
      <!--            <el-form-item label="机构类别：">{{form.category}}</el-form-item>-->
      <!--            <el-form-item label="详细地址：">{{form.address}}</el-form-item>-->
      <!--            <el-form-item label="电话：">{{form.mobile}}</el-form-item>-->
      <!--            <el-form-item label="联系人：">{{form.contacts}}</el-form-item>-->
      <!--            <el-form-item label="门头照片：">{{form.mtImg}}</el-form-item>-->
      <!--            <el-form-item label="许可证照片：">{{form.xkImg}}</el-form-item>-->
      <!--            <el-form-item label="设备数量：">{{form.equipmentCount}}</el-form-item>-->
      <!--            <el-form-item label="总处理量：">{{form.totalHandle}}</el-form-item>-->
      <!--            <el-form-item label="日处理量：">{{form.dayHandle}}</el-form-item>-->
      <!--            <el-form-item label="创建时间：">{{form.createTime}}</el-form-item>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-form>-->
      <div style="height: 70vh;overflow-y: auto;">
        <div class="line-h bor-btm p-tb-10">
          <div class="view-title">基本信息</div>
          <div class="flex">
            <div style="margin-right: 50px">
              <div>机构编号：{{form.id}}</div>
              <div>机构名称：{{form.name}}</div>
              <div>机构代码：{{form.code}}</div>
              <div>机构地址：{{form.address}}</div>
            </div>
            <div>
              <div>状态：{{form.name}}</div>
              <div>等级：{{form.level}}</div>
              <div>类型：{{form.category}}</div>
            </div>
          </div>
        </div>

        <div class="line-h bor-btm p-tb-10">
          <div class="view-title">用户信息</div>
          <div class="flex">
            <div style="margin-right: 50px">
              <div>用户姓名：{{form.contacts}}</div>
              <div>账号类型：{{form.name}}</div>
            </div>
            <div>
              <div>联系电话：{{form.mobile}}</div>
            </div>
          </div>
        </div>

        <div class="line-h p-tb-10">
          <div class="view-title">检测报告</div>
          <el-table v-loading="loading"
                    :data="inspectionReportList">
            <el-table-column label="序号"
                             align="center"
                             prop="id" />
            <el-table-column label="所属部门"
                             align="center"
                             prop="deptId" />
            <el-table-column label="上传季度"
                             align="center"
                             prop="session" />
            <el-table-column label="状态"
                             align="center"
                             prop="uploadStatus">
            </el-table-column>
            <el-table-column label="上传时间" 
                             align="center"
                             prop="createTime" />
            <el-table-column label="附件"
                             align="center"
             >
              <template slot-scope="scope">
                    <span @click="downloadFun(scope.row)" class="downloadFun">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                           icon="el-icon-edit"
                           v-if="scope.row.uploadStatus == '未上传'"
                           @click="handleUpdateRepot(scope.row)"
                           v-hasPermi="['system:institution:edit']">上传</el-button>

                <el-button size="mini"
                           type="text"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.row)"
                           v-hasPermi="['system:institution:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="line-h p-tb-10">
          <div class="view-title">
            <span>设备信息</span>
            <span>台数{{medicalMachineList.length}}台</span>
          </div>
          <el-table v-loading="loading"
                    :data="medicalMachineList">
            <el-table-column label="设备编号"
                             align="center"
                             prop="id" />
            <el-table-column label="设备型号"
                             align="center"
                             prop="serial" />
            <el-table-column label="网络"
                             align="center"
                             prop="networkStatus" />
            <el-table-column label="状态"
                             align="center"
                             prop="runningStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_normal_disable"
                          :value="scope.row.runningStatus" />
              </template>
            </el-table-column>
            <el-table-column label="机构名称" align="center" prop="medicalIdName" />                
            <el-table-column label="创建时间" align="center" prop="createTime" />                
            <el-table-column label="处理污水量（升）"
                             align="center"
                             prop="sewagel" />
            <el-table-column label="处理污水量（吨）"
                             align="center"
                             prop="sewaget" />
            <el-table-column label="吸污泵"
                             align="center"
             >
              <template slot-scope="scope">
                 <el-switch
                  v-model="scope.row.inpumponoff"
                  :disabled="scope.row.inpumponoff"
                  @change="opMedicalFun('inpumponoff',scope.row)"
                  active-color="#1890ff"
                  inactive-color="#666">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="排污泵"
                             align="center"
            >
              <template slot-scope="scope">
                    <el-switch
                      :disabled="scope.row.outpumponoff"
                      v-model="scope.row.outpumponoff"
                      active-color="#1890ff"
                      @change="opMedicalFun('outpumponoff',scope.row)"
                      inactive-color="#666">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="臭氧模块"
                             align="center"
             >
                 <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.ozoneonoff"
                      active-color="#1890ff"
                      :disabled="scope.row.ozoneonoff"
                      @change="opMedicalFun('ozoneonoff',scope.row)"
                      inactive-color="#666">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="循环泵"
                             align="center"
                    >
                <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.sterilizetime"
                      :disabled="scope.row.sterilizetime"
                      @change="opMedicalFun('sterilizetime',scope.row)"
                      active-color="#1890ff"
                      inactive-color="#666">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="远程控制"
                             align="center"
                            >
            <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.onoffwrite"
                      @change="opMedicalFun('onoffwrite',scope.row)"
                      active-color="#1890ff"
                      inactive-color="#666">
                    </el-switch>
                </template>
            </el-table-column>                 
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
              <template slot-scope="scope">
               <!--  <el-button size="mini"
                          type="text"
                          icon="el-icon-edit"
                          @click="handleUpdate(scope.row)"
                          v-hasPermi="['system:institution:edit']">展开</el-button>
                -->
                <el-button size="mini"
                           type="text"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.row)"
                           v-hasPermi="['system:institution:remove']">解绑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="line-h p-tb-10">
          <div class="view-title">告警信息</div>
          <el-table v-loading="loading"
                    :data="warninglistarr">
            <el-table-column label="序号"
                             align="center"
                             prop="code" />
            <el-table-column label="告警地点"
                             align="center"
                             prop="medicalIdName" />
            <el-table-column label="类型"
                             align="center"
                             prop="status" >
                <template slot-scope="scope">
                  <span>{{scope.row.status == 1 ? '低': '高' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="告警时间"
                             align="center"
                             prop="warningTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.warningTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="告警内容"
                             align="center"
                             prop="warningContent" />
          </el-table>
          <pagination v-show="warninglistarrtotal>0"
                      :total="warninglistarrtotal"
                      :page.sync="warninglistarrqueryParams.pageNo"
                      :limit.sync="warninglistarrqueryParams.pageSize"
                      @pagination="warninglistarrFun" />
        </div>

      </div>
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="viewOpen = false">关 闭</el-button>-->
      <!--      </div>-->
    </el-dialog>
    
      <!-- 上传对话框 -->
    <el-dialog title="上传检测报告"
               :visible.sync="upRepont"
               width="500px"
               append-to-body>
          <el-upload
              class="upload-demo"
              drag
              :http-request="updatereportUrl"
              action="#"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF,.DOCX"
              >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">支持扩展名：docx .pdf .jpg...</div>
          </el-upload>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="submitFormRepont">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInstitution, getInstitution, delInstitution, addInstitution, updateInstitution,getInstitutionDetail } from "@/api/system/institution";
import { treeselect } from "@/api/system/dept";
import { warninglist, appletlist } from "@/api/system/message";
import { opMedical } from "@/api/system/freshMachine";
import { uploadAvatar } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Institution",
  dicts: ['institution_level', 'institution_category', 'sys_normal_disable'],
  components: { Treeselect },
  data() {
    return {
      upRepont:false,
      //检测报告
      inspectionReportList:[],
      //设备信息列表台数
      medicalMachineList:[],
      // 遮罩层
      loading: true,
      //机构详情告警列表
      warninglistarr:[],
      warninglistarrtotal:null,
      //详情ID
      ID:null,
      warninglistarrqueryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null,
        medicalId: null
      },
      //机构详情检测报告
      appletlistarr:[],
      appletlistarrtotal:[],
      appletlistarrqueryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null,
        institutionId: null
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【医疗机构】表格数据
      institutionList: [],
      // 部门树选项
      deptOptions: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      viewOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        code: null,
        level: null,
        category: null,
        deptId: null,
        address: null,
        status: null,
      },
      // 表单参数
      form: {},
      freshForm: {},
      mtImg: '',
      xkImg: '',
      // 表单校验
      rules: {
        name: [
          { required: true, message: "机构名称不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "机构代码不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属部门不能为空", trigger: "blur" }
        ],
        level: [
          { required: true, message: "机构等级不能为空", trigger: "blur" }
        ],
        category: [
          { required: true, message: "机构分类不能为空", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "机构电话为空", trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "机构联系人不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  methods: {
    //上传
     handleUpdateRepot(res){
        this.upRepont = true
     },
     // 上传文件
    updatereportUrl(params, type) {
      let file = params.file
      let vm = this;
      const formdata = new FormData();
      formdata.append("avatarfile", file);
      uploadAvatar(formdata).then(response => {
        //this.form.reportUrl = response.imgUrl;
      });
    },
    //设备操作
    opMedicalFun(type,res){
      let query = {
        code:this.ID,
        command:type,
        commandValue:res[type] == false ? '0' : '1' ,
      }
      opMedical(query).then(response => {
        
      });
    },
    //下载文件
    downloadFun (url) {
      let image = new Image()  //创建图片对象
      image.setAttribute('crossOrigin', 'anonymous') //设置允许跨域
      image.src = url.reportUrl //赋值src
      image.onload = () => {
        //等待图片加载完成创建canvas
        let canvas = document.createElement('canvas')
        //将图片绘制到canvas画布上
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        //获取图片文件格式  jpg/jpeg/png
        let ext = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase()
        //导出画布快照  此时已越过跨域限制成功取到图片数据
        let dataURL = canvas.toDataURL('image/' + ext)
        //创建a标签
        const a = document.createElement("a");
        // 赋值a标签download属性值，标明该a标签提供下载功能，同时该属性指定了下载时的文件名称
        a.download = url.name;
        //赋值a标签下载地址，即canvas导出的画布快照 base64格式的图片地址
        a.href = dataURL;
        //添加a标签到dom中
        document.body.appendChild(a);
        //触发a标签点击事件 触发下载
        a.click();
        //下载完成 删除多余的a标签  保持页面原有元素不动
        document.removeChild(a);
      }
    },
        /** 查询【医疗机构】列表 */
    getList() {
      this.loading = true;
      listInstitution(this.queryParams).then(response => {
        this.institutionList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询【医疗机构】详情告警 */
    warninglistarrFun() {
      this.loading = true;
      this.warninglistarrqueryParams.medicalId = this.ID
      warninglist(this.warninglistarrqueryParams).then(response => {
        this.warninglistarr = response.data;
        this.warninglistarrtotal = response.total;
        this.loading = false;
      });
    },
    /** 查询【医疗机构】详情设备信息 */
    appletlistarrFun() {
      this.loading = true;
      this.appletlistarrqueryParams.institutionId = this.ID
      appletlist(this.appletlistarrqueryParams).then(response => {
        this.appletlistarr = response.data;
        this.appletlistarrtotal = response.total;
        this.loading = false;
      });
    },
    handleView(row) {
      this.viewOpen = true;
      console.log(row)
      let name = row.name;
      this.form = row;
      this.title = name + " 详情";
      this.ID = row.id
      getInstitutionDetail({id:row.id}).then(response => {
        this.inspectionReportList = response.data.inspectionReportList 
        this.medicalMachineList = response.data.medicalMachineList.map(item=>{
          item.inpumponoff = item.inpumponoff == 0 ? false : true
          item.outpumponoff = item.outpumponoff == 0 ? false : true
          item.ozoneonoff = item.ozoneonoff == 0 ? false : true
          item.sterilizetime = item.sterilizetime == 0 ? false : true
          item.onoffwrite = item.onoffwrite == 0 ? false : true
          return item
        }) 
      });
      /*this.warninglistarrFun()
      this.appletlistarrFun()*/
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        code: null,
        level: null,
        category: null,
        deptId: null,
        address: null,
        status: null,
        createTime: null,
        updateTime: null
      };
      this.xkImg = ""
      this.mtImg = ""
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加【医疗机构】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getInstitution(id).then(response => {
        this.form = response.data;
        this.xkImg = process.env.VUE_APP_BASE_API + response.data.xkImg;
        this.mtImg = process.env.VUE_APP_BASE_API + response.data.mtImg;
        this.open = true;
        this.title = "修改【医疗机构】";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateInstitution(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInstitution(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除【医疗机构】编号为"' + ids + '"的数据项？').then(function () {
        return delInstitution(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/institution/export', {
        ...this.queryParams
      }, `institution_${new Date().getTime()}.xlsx`)
    },
    // 上传照片
    updateUserImg(params, type) {
      let file = params.file
      let vm = this;
      const formdata = new FormData();
      formdata.append("avatarfile", file);
      uploadAvatar(formdata).then(response => {
        this.form.mtImg = response.imgUrl;
        this.mtImg = process.env.VUE_APP_BASE_API + response.imgUrl;
      });
    },
    updateUserImg1(params, type) {
      let file = params.file
      let vm = this;
      const formdata = new FormData();
      formdata.append("avatarfile", file);
      uploadAvatar(formdata).then(response => {
        this.form.xkImg = response.imgUrl;
        this.xkImg = process.env.VUE_APP_BASE_API + response.imgUrl;
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.view-title {
  color: #333;
  font-size: 16px;
}

.line-h {
  line-height: 30px;
}

.bor-btm {
  border-bottom: 1px solid #dddddd;
}
</style>
<style scoped>
.uploadMt /deep/.el-upload-dragger {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uploadMt /deep/.el-upload-dragger img {
  width: 100%;
  height: 100%;
}
.el-upload-dragger img{
  width:200px;
  height:200px;
}
.downloadFun{
  cursor: pointer;
  color: #1890ff;
}
</style>